<template>
	<view class="EditAddress">
		<view class="edits"></view>
		<view class="input f-background">
			<view class="home por">
				<image class="home-icon poa" :class="params.addrType == 1?'app-left':'app-right scale-x'"
					src="@/static/img/dzk.png" mode=""></image>
				<view class="size-32 color2 dis por" :class="{'font-weight-600':params.addrType == 1}"
					@click="params.addrType = 1">送到家里</view>
				<view class="size-32 color2 dis por" :class="{'font-weight-600':params.addrType == 2}"
					@click="params.addrType = 2">指定位置</view>
			</view>
			<u-form :model="params" ref="uForm">
				<view @click="onJumpPage" v-if="params.addrType == 1">
					<u-form-item label="小区" labelWidth="136rpx">
						<u--input clearable v-model="params.communityName || communityName" readonly class="input-text size-28 color3"
							placeholder-class="building-plac" type="text" border="none"
							suffixIcon="arrow-right"></u--input>
					</u-form-item>
				</view>
				<u-form-item label="送达" labelWidth="136rpx" v-else @click="onSelectedPosition">
					<u--input clearable v-model="params.addressInfo || addressInfo" readonly
						class="input-text size-28 color3" placeholder-class="building-plac" type="text" border="none"
						suffixIcon="arrow-right"></u--input>
				</u-form-item>
				<u-form-item label="门牌号" labelWidth="136rpx">
					<u--input clearable v-model="params.houseNumber" class="input-text size-28 color3"
						placeholder-class="building-plac" type="text" border="none"
						placeholder="例：5号楼201室(选填)"></u--input>
				</u-form-item>
				<u-form-item label="姓名" labelWidth="136rpx">
					<view class=" width100 dis-cen">
						<u--input clearable v-model="params.consignee" class="input-text size-28 color3"
							placeholder-class="building-plac" type="text" border="none"
							placeholder="请输入收件人姓名"></u--input>
						<view class="select-sex dis-ali">
							<view class="dis-ali" @click="params.sex = 1">
								<text class="iconfont"
									:class="params.sex == 1 ? 'icon-danxuanxuanzhong color' : 'icon-danxuanweixuanzhong colorbc'"></text>
								<text class="font-weight-400 color3 size-28">先生</text>
							</view>
							<view class="dis-ali margin-left-24" @click="params.sex = 0">
								<text class="iconfont"
									:class="params.sex == 0 ? 'icon-danxuanxuanzhong color' : 'icon-danxuanweixuanzhong colorbc'"></text>
								<text class="font-weight-400 color3 size-28">女士</text>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="手机" labelWidth="136rpx">
					<u--input clearable v-model="params.telephone" class="input-text size-28 color3" maxlength="11"
						placeholder-class="building-plac" type="text" border="none" placeholder="请输入收件人手机号"></u--input>
				</u-form-item>
				<u-button type="primary" :throttleTime="3000"
					:customStyle="{width: '100%',height: '110rpx',borderRadius: '24rpx',margin: '30rpx auto 0'}"
					color="linear-gradient( 90deg, #EB0000 0%, #FF2222 100%, #EB0000 100%)" @click="onSubmit">
					<text class="color-f font-weight-600 size-34">保存并使用</text>
				</u-button>
			</u-form>
		</view>
		<view class="common f-background">
			<view class="common-title border-bottom color2 size-34 font-weight-600">常用地址</view>
			<u-swipe-action>
				<u-swipe-action-item @click="addressPrompt(item.id)" :options="options" v-for="(item, index) in useList" :key="index">
					<view class="common-for dis-cen" :class="{'border-top':index != 0}">
						<view class="common-xuan" @click="setStorageSync(item)">
							<view class="font-weight-600 color2 size-28 margin-bottom-24">
								<text v-if="item.addrType == 1">{{item.communityName}}</text>
								<text v-if="item.addrType == 2">{{item.addressInfo}}</text> 
								<text class="margin-left-12">{{item.houseNumber}}</text>
							</view>
							<view class="font-weight-400 color9 size-24">
								{{item.consignee}} {{item.sex == 1?'先生':'女士'}} {{item.telephone}}
							</view>
						</view>
						<image @click="displayBack(item,1)" class="com-icons" src="@/static/icons/bjs.png" mode="">
						</image>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<view class="default text-align" v-if="!useList.length">
				<view class="font-weight-600 color2 size-30 margin-bottom-24">暂无常用地址</view>
				<view class="font-weight-400 size-26">使用过的地址会在这里显示</view>
			</view>
		</view>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import { OnlineStatic, GetAddressInfoById, AddorupdAddressInfos, GetCommonAddress,DelAddressInfoById } from "@/api/index"
	export default {
		data() {
			return {
				useList: [], // 常用地址
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#EB0000'
					}
				}],
				OnlineStatic,
				// pickNunber: 0, // 计算价格的请求参数
				community: {}, // 首页绑定小区
				addressInfo: '请选择位置',
				communityName: '请选择小区',
				typeOptions: 0,
				params: {
					id: '', // 地址id
					communityName: '',
					communityId: '', // 社区id
					telephone: '', // 联系人电话
					sex: 1, // 	0-女 1-男
					consignee: '', // 	收货人
					addressInfo: '', // 指定位置
					latitude: 0, // 经度维度
					longitude: 0, // 维度
					houseNumber: '', // 门牌号
					addrType: 1, // 地址类型 1.小区地址 2.周围地址
				},
			}
		},
		onLoad(options) {
			this.typeOptions = options.type
			console.log('options',options)
			// if(uni.getStorageSync('addsId')) this.postGetAddressInfoById()
			this.postGetCommonAddress()
			// this.displayBack(uni.getStorageSync('addsData'))
		},
		methods: {
			onSubmit(name, icon) {
				const { params } = this
				let tis = ''
				if (!params.communityId && params.addrType == 1) tis = "请选择小区"
				else if (!params.addressInfo && params.addrType == 2) tis = "请选择位置"
				else if (!params.consignee) tis = "请输入收件人姓名"
				else if (!/^.{1,10}$/.test(params.consignee)) tis = "收件人姓名，长度1-10位"
				else if (!params.telephone) tis = "请输入手机号"
				else if (!/^(13|14|15|16|17|18|19)\d{9}$/.test(params.telephone)) tis = "请输入正确的手机号"
				if (tis) {
					this.showToast(tis)
					return
				}
				this.postAddorupdAddressInfos()
				console.log('params', params)
			},
			// 删除地址
			async postDelAddressInfoById(id) {
				const { data, code } = await DelAddressInfoById({ addressId: id })
				if (code == '200') {
					if(id == uni.getStorageSync('addsData').id) {
						uni.removeStorageSync('addsData');
						this.displayBack()
					}
					this.postGetCommonAddress()
				}
			},
			// 删除地址提示
			addressPrompt(id){
				const _this = this
				console.log(id)
				uni.showModal({
					title: '温馨提示',
					content: '确认删除该地址吗？',
					success: function (res) {
						if (res.confirm) {
							_this.postDelAddressInfoById(id)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 回显数据
			displayBack(addsData, index) {
				// if(!addsData) return
				const { params } = this
				for (let i in params) {
					params[i] = !addsData ? '' : addsData[i]
					if(!addsData){
						if(['addrType','sex'].includes(i)) params[i] = 1
						if(['latitude','longitude'].includes(i)) params[i] = 0
					}
				}
				this.params = params
				// this.params
				if (index == 1) {
					this.showToast('请在上面修改地址信息')
				}
			},
			// 查看地址详情
			// async postGetAddressInfoById(id) {
			// 	const { data, code } = await GetAddressInfoById({ addressId: uni.getStorageSync('addsId') || 0 })
			// 	if (code == '200') {
			// 		console.log('data', data)
			// 		// for(let i in this.params) {
			// 		// 	this.params[i] = data[i]
			// 		// }
			// 		// this.params.communityId = data.id
			// 		// this.params.communityName = data.communityName
			// 	}
			// },
			// 添加地址
			async postAddorupdAddressInfos() {
				const { data, code } = await AddorupdAddressInfos(this.params)
				if (code == '200') {
					console.log(data)
					this.setStorageSync(data)
				}
			},
			// 常用地址
			async postGetCommonAddress() {
				const { code, data } = await GetCommonAddress()
				if (code == '200') {
					this.useList = data
				}
			},
			setStorageSync(data) {
				if(this.typeOptions) return
				console.log('data',data)
				if(data.communityId != uni.getStorageSync('addsData').communityId) uni.removeStorageSync('paramsList');
				uni.setStorageSync('addsData', data)
				// let pages = getCurrentPages(); //获取当前页面
				// let beforePage = pages[pages.length - 2] //获取上一个页面的实例
				// beforePage.$vm.postGetAddressInfoById(data.id) //调用上一页面方法
				uni.navigateBack({})
			},
			// 点击获取位置
			onSelectedPosition() {
				const _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('res', res)
						if(!res.name) {
							_this.showToast('未选择位置')
							return
						}
						_this.params.addressInfo = res.name
						_this.params.latitude = res.latitude
						_this.params.longitude = res.longitude
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
					}
				});
			},
			showToast(name, icon) {
				uni.showToast({
					title: name,
					duration: 2000,
					icon: icon || 'none'
				});
			},
			onJumpPage() {
				uni.navigateTo({
					url: '/packagePerson/address/residential'
				});
			},
		}
	}
</script>

<style lang="scss">
	.EditAddress {
		padding-bottom: 16rpx;

		.edits {
			width: 100%;
			height: 854rpx;
			background: linear-gradient(180deg, #EB0000 20%, #F8F9FB 80%);
		}

		.colorbc {
			color: #BCC1C5;
		}

		.scale-x {
			transform: scaleX(-1);
		}

		::v-deep.uicon-arrow-right {
			font-size: 30rpx !important;
			color: #575757 !important;
		}

		.home {
			display: grid;
			grid-template-columns: repeat(2, 50%);
			background: #FFDADA;
			height: 90rpx;

			.home-icon {
				width: 390rpx;
				height: 90rpx;
			}
		}

		::v-deep.input {
			margin: -804rpx 20rpx 20rpx 20rpx;
			border-radius: 24rpx;
			overflow: hidden;
			box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(0, 0, 0, 0.1);

			.u-input__content__field-wrapper__field {
				height: 90rpx;
				color: #222222 !important;
				font-size: 30rpx !important;
			}

			.u-form {
				padding: 44rpx 24rpx 26rpx;
			}

			.u-form-item__body__left__content {
				// padding-left: 16rpx;
				box-sizing: border-box;
				padding-right: 0;

				.u-form-item__body__left__content__label {
					font-size: 30rpx !important;
					color: #222222 !important;
					font-weight: 400;
				}

				.building-plac {
					color: #BCC1C5 !important;
				}
			}

			.select-sex {
				.iconfont {
					margin-right: 8rpx;
				}
			}
		}

		// 常用地址
		.common {
			margin: 0 20rpx;
			box-sizing: border-box;
			padding: 0 24rpx;
			border-radius: 24rpx;

			.common-title {
				padding: 40rpx 0 26rpx;
				box-sizing: border-box;
			}

			.default {
				padding: 50rpx 0 70rpx;
			}

			.common-for {
				// padding: 34rpx 16rpx 34rpx 0;
				padding-right: 16rpx;

				.common-xuan {
					padding: 34rpx 0;
					width: 90%;
				}

				.com-icons {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>